<template>
	<div>
		<!-- 食物数据展示 -->
		<div>
			<el-table :data="pageInfo.list" style="width: 100%" :row-class-name="tableRowClassName">
				<el-table-column type="index" width="50"></el-table-column>
				<el-table-column prop="foodName" label="名称" width="80"></el-table-column>
				<el-table-column prop="foodDesc" label="描述" width="280"></el-table-column>
				<el-table-column prop="foodCal" label="热量(KJ/100g)" width="130"></el-table-column>
				<el-table-column prop="foodCar" label="碳水(g/100g)" width="130"></el-table-column>
				<el-table-column prop="foodProtein" label="蛋白质(g/100g)" width="130"></el-table-column>
				<el-table-column prop="foodFat" label="脂肪(g/100g)" width="130"></el-table-column>
			</el-table>
		</div>
		<!-- 分页按钮 -->
		<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="pageInfo.pageNum" :page-sizes="[5, 10, 15]" :page-size="pageInfo.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
			</el-pagination>
		</div>
	</div>

</template>

<style>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
</style>

<script>
	export default {
		methods: {
			/* 隔行换色方法 */
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex % 2 == 1) {
					return 'warning-row';
				} else if (rowIndex % 2 == 0) {
					return 'success-row';
				}
				return '';
			},
			/* 分页方法 */
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val;
				this.getFoodList();
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val;
				this.getFoodList();
			},
			//发送ajax封装成方法
			getFoodList(){
				//发送ajax
				this.axios.get("http://localhost:8080/diets/food/2" + "/" + this.currentPage + "/" + this.pageSize).then(
					res => { //此处用function(res)无法对tableData进行赋值，但是用箭头函数就可以！！！
						console.log(res.data.data.list);
						this.pageInfo = res.data.data;
					})
			}

		},
		data() {
			return {
				tableData: [],
				currentPage: 1,
				pageSize: 5,
				pageInfo: {}
			}
		},
		//在created生命周期方法中初始化列表数据
		created(){
			this.getFoodList();
		}
	}
</script>
